<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.mobile" placeholder="手机号" style="width: 200px;"  class="filter-item" />
      <el-select v-model="listQuery.status" placeholder="状态" class="filter-item" style="width: 120px;margin-left: 10px;">
        <el-option v-for="item in [1,2,3]" :key="item" :label="item | statusFilter" :value="item" />
      </el-select>
      <el-button type="primary" class="filter-item" style="margin-left: 40px;" @click="getSmsMessages">查询</el-button>
    </div>
    <el-table :data="orders" style="width: 100%;margin-top:30px;" border >
      <el-table-column align="center" label="#" width="50">
        <template v-slot="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="短信主题">
        <template v-slot="scope">
          {{ scope.row.tpl.tpl_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号">
        <template v-slot="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="短信内容" >
        <template v-slot="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="发送状态" >
        <template v-slot="scope">
          {{ scope.row.status | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="发送结果">
        <template v-slot="scope">
          {{ scope.row.result }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="发送时间" >
        <template v-slot="scope">
          {{ scope.row.send_at | formatDate }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0"  :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getSmsMessages" />
  </div>
</template>

<script>
import {getSmsSendLog} from '@/api/sms'
import moment from "moment/moment";
import Pagination from "@/components/Pagination/index.vue";

export default {
  name: 'SmsSendLog',
  components: {Pagination},
  data() {
    return {
      orders: [],
      total:0,
      listQuery:{
        page: 1,
        pageSize: 100,
        status:0,
        mobile:'',
      },
      dialogVisible: false,
      dialogType: 'new'
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '已发送',
        2: '发送失败',
        3: '等待回执'
      }
      return statusMap[status]
    },
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created() {
    this.getSmsMessages()
  },
  methods: {
    async getSmsMessages() {
      const res = await getSmsSendLog(this.listQuery)
      this.orders = res.data.list
      this.total = res.data.total
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
